<template>
    <div class="boxs">
        <div class="btn">
            <el-button @click="addusers" type="warning"><i class="el-icon-plus"></i>添加账户</el-button>
            <!-- 下拉 -->
            <el-select v-model="value" clearable placeholder="请选择需要查找角色信息" @change="select">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </div><br>
        <!-- 表格 -->
      <el-table :data="countpage" style="width: 100%">
        <el-table-column prop="username" label="用户名" ></el-table-column>
        <el-table-column label="用户头像" ><template slot-scope="scope"><img :src="scope.row.image" alt=""></template></el-table-column>
        <el-table-column prop="roleName" label="身份" ></el-table-column>
        <el-table-column prop="phone" label="账号" ></el-table-column>
        <el-table-column label="上次登录时间" >
          <template slot-scope="scope">
            <p>{{scope.row.lastlogin}}</p>
          </template>
        </el-table-column>
        <el-table-column label="该账户是否可用" prop="isok">
          <template slot-scope="scope">
            <el-button :icon="scope.row.isok==1?yesico:noico" :type="scope.row.isok==1?yesinfo:noinfo" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <div id="btns">
              <el-button @click="gai(scope.row.id,scope.row.image,scope.row.username,scope.row.phone,scope.row.isok)" type="primary" plain class="el-icon-edit">修改</el-button>
              <el-tooltip class="item" effect="dark" content="设置用户权限" placement="bottom-start">
                <div @click="set(scope.row.id)" class="el-icon-s-tools set"></div>
              </el-tooltip>
              <el-button style="color: white;" type="danger" @click="reomove(scope.row.id)" class="el-icon-delete">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table><br><br>
      <div class="fenyebox">
        <div class="yama">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[3,5,9,12]"
            :current-page="page"
            :page-size="limit"
            layout="sizes, prev, pager, next"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
        <!-- 注册模态框 -->
        <el-dialog title="注册：" :visible.sync="dialogVisible" width="40%">
          <!-- 上传图片 -->
        <div class="uploads">
          <p>添加头像<span> * </span> :</p>
          <el-upload
            class="avatar-uploader"
            :action="upload()"
            :headers="headerObj"
            :show-file-list="false"
            name="image"
            :auto-upload="true"
            :on-change="handleChange"
            :on-success="Onsuccess"
            :multiple="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload><br><br>
        </div>
        <div id="zhucebox">
          <div><p >注册用户名<span> * </span> :</p><el-input  placeholder="请输入用户名不得少于6位及英文数字" v-model="names" clearable></el-input></div><br>
          <div><p>注册手机号<span> * </span> :</p><el-input placeholder="请输入手机号" v-model="phone" clearable></el-input></div><br>
          <div><p>注册密码<span> * </span> :</p><el-input placeholder="请输入密码" v-model="password" clearable></el-input></div>
        </div><br>
        <div>
          <p>该账户是否可用 :</p><br>
          <el-radio v-model="radio" label="1">可用</el-radio>
          <el-radio v-model="radio" label="0">禁止使用</el-radio>
        </div><br>
      <div>
        <p>设置权限角色 :</p><br>
        <template v-for="item in options">
          <el-radio :key="item.id" v-model="radio2" :label="item.id" border size="medium">{{item.name}}</el-radio>
        </template>
      </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ok">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 修改权限模态框 -->
        <el-dialog
          title="提示"
          :visible.sync="setjiaose"
          width="30%">
            <p>设置权限角色 :</p><br>
            <template v-for="item in options">
              <el-radio :key="item.id" v-model="radio3" :label="item.id" border size="medium">{{item.name}}</el-radio>
            </template>
          <span slot="footer" class="dialog-footer">
            <el-button @click="setjiaose = false">取 消</el-button>
            <el-button type="primary" @click="yes">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改用户模态框 -->
      <el-dialog
        title="提示"
        :visible.sync="rectifyuser"
        width="30%">
        <!-- 修改图片 -->
        <div class="xiugaibox">
          <p class="xiugaiimg">修改图片：</p>
          <el-upload 
            class="avatar-uploader"
            :action="upload()"
            :show-file-list="false"
            name="image"
            :headers="headerObj"
            :auto-upload="true"
            :on-change="handleChangeTow"
            :on-success="OnsuccessTow"
            :multiple="false">
            <img v-if="imageUrlTow" :src="imageUrlTow" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload><br>
          <div class="gai"><p>输入修改的账号:</p><el-input placeholder="请输入修改账号" v-model="phoneTow" clearable></el-input></div><br>
          <div class="gai"><p>输入修改的用户名:</p><el-input placeholder="请输入修改用户名" v-model="namesTow" clearable></el-input></div><br>
          <div>
            <p>选择是否可用：</p><br>
            <el-radio v-model="radioG" :label="1">可用</el-radio>
            <el-radio v-model="radioG" :label="0">禁用</el-radio>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rectifyuser = false">取 消</el-button>
          <el-button type="primary" @click="suer">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<style lang="less" scoped>
    /deep/.el-table__row :nth-child(3){
      color: rgb(64,182,255);
    }
    .fenyebox{
      overflow: hidden;
      width: 100%;
      .yama{
        float: right;
      }
    }
    #zhucebox{
      div{
        width: 100%;
        overflow: hidden;
        p{
          float: left;
          margin-top: 2%;
        }
        /deep/.el-input{
          width: 55%;
          float: right;
          margin-right: 20%;
        }
        span{
          color: red;
        }
      }
    }
    .xiugaibox{
      overflow: hidden;
      .xiugaiimg{
        float: left;
        margin-top: 15%;
      }
      .gai{
        overflow: hidden;
        /deep/.el-input{
          width: 230px;
          float: right;
          margin-right: 7%;
        }
        p{
          float: left;
          margin-top: 3%;
        }
      }

      /deep/.avatar-uploader{
        margin-left: 29%;
        width: 80px;
        height: 80px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      /deep/.el-upload{
        width: 80px;
        height: 80px;
      }
      /deep/.el-icon-plus{
        margin-top: -10%;
        width: 80px;
        height: 80px;
      }
    }
    #btns {
      .set{
        margin-top:60px ;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin: 0 10px;
        font-size: 20px;
        border: 0.5px solid rgba(0, 183, 255, 0.11);
        border-radius: 6px;
        cursor: pointer;
        &:hover{
          background-color: #409EFF;
          color: white;
        }
      }
      :nth-child(1){
        width: 80px;
        height: 40px;
      }
      :nth-child(3){
        width: 80px;
        height: 40px;
      }
    }
    /deep/.is-bordered{
      margin: 10px 10px;
    }
    .uploads{
      overflow: hidden;
      /deep/.avatar-uploader{
        margin-left: 25%;
      }
      p{
        float: left;
        margin-top: 15%;
        span{
          color: red;
        }
      }
    }
    .boxs{
        background-color: white;
        box-sizing: border-box;
        padding: 15px;
    }
    .btn{
    overflow: hidden;
    /deep/.el-button{
        width: 150px;
        border-radius: 10px;
    }
    /deep/.el-select{
        width: 200px !important;
        float: right;
        margin: 0px 20px;
    }
    }
    /deep/.el-table__cell{
        text-align: center !important;
        img{
            width: 50px;
            height: 50px;
            border-radius: 10px;
        }
    }
</style>
<script>
    import {role,people,adduser,removeuser,inquire,permission,change_information} from '@/util/routeraxios'
    export default {
      data() {
        return {
        headerObj:{token:JSON.parse(sessionStorage.getItem('token'))},
        setId:'',  //ID查询
        noinfo:'info',  //状态不可用
        noico:'el-icon-close',
        yesinfo:'success', //状态可用
        yesico:'el-icon-check',
        tableData: [], // 表格数据
        options: [], // 下拉数据
        value: '', //下拉
        rectifyuser:false,//修改用户模态
        setjiaose:false, //设置角色权限模态
        dialogVisible: false, //注册模态框
        imageUrl:'',  //上传图片
        imageUrlTow:'', //修改图片
        phone:'',  //注册账号
        phoneTow:'', //修改电话
        namesTow:"",  //修改名字
        password:'', //注册密码
        names:'', //注册与修改的名字
        usErId:'',//角色ID
        radioG: 1, //修改的状态
        radio: '1', //单选框是否可用
        radio2: 1,  //选择角色
        radio3:1,//设置权限
        addfinal_image:'', //亲求完成后的添加图片
        alter_picture:'', //亲求完成后的修改图片
        page:1,   //分页
        limit:5,
        }
      },
      created(){
        role({}).then((response)=>{  //身份
          if(response.data.code == 0){
            this.options = response.data.data
          }
        }).catch(function(err){
          console.log('role出错',err);
        })
        this.xuanr()   //渲染
      },
      methods:{
        xuanr(){  //渲染表格数据
          people({}).then((response)=>{  //用户信息
            if(response.data.code == 0){
              response.data.data.map(item=>{
                item.lastlogin = new Date(item.lastlogin)
                item.lastlogin = item.lastlogin.toLocaleDateString().replace(/\//g, '-') + ' ' + item.lastlogin.toTimeString().substr(0, 8)
              })
              this.tableData = response.data.data
              console.log(this.tableData);
            }
          }).catch(function(err){
          console.log('people出错',err);
        })
        },
        handleChange(file,fileList){  //注册
          this.imageUrl = URL.createObjectURL(file.raw)
        }, 
        handleChangeTow(file,fileList){  //修改
          this.imageUrlTow = URL.createObjectURL(file.raw)
          // console.log(this.imageUrlTow);
        },
        Onsuccess(res){  //添加图片上传后端
          this.addfinal_image = res.data 
          // console.log(res);
          // console.log(this.addfinal_image);
        },
        OnsuccessTow(res){  //修改图片
          this.alter_picture = res.data
          // console.log(res);
          // console.log(this.alter_picture);
        },
        reomove(v){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '警告！', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  //删除用户按钮
        removeuser({adminId:v}).then((response)=>{
          if(response.data.code == 0){
            this.xuanr() 
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        }).catch((err)=>{
          console.log('reomove删除出错',err);
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        addusers(){ //添加用户按钮
          this.dialogVisible = true
        },
        upload(){ //上传图片给后端的接口
          return 'http://1.117.91.107:8080/big_turnip/upload'
        },
        ok(){  //确定添加用户模态
          if(this.imageUrl.length == 0 || this.phone.length == 0 || this.password.length == 0){
          this.$message({
            message: '请在确定填写必选项',
            type: 'warning'
          });
          // console.log('角色:',String(this.radio2),'是否可用:',Number(this.radio),'账号:',this.phone,'密码:',this.password,'名字:',this.names);
          }else{  //发送请求注册
          adduser({
            image:String(this.addfinal_image),
            isok:Number(this.radio),
            password:this.password,
            password2:this.password,
            phone:this.phone,
            roleIds:[String(this.radio2)],
            username:this.names,
          }).then((response)=>{  //用户信息
            console.log(response);
            if(response.data.code == 52001){
              this.$message({
                message: '注册失败！请确认用户名及注册手机号是否规范',
                type: 'warning'
              });
            }
            if(response.data.code == 20002){
              this.$message({
                message: '注册失败！该用户名已存在',
                type: 'warning'
              });
            }
            if(response.data.code == 20001){
              this.$message({
                message: '注册失败！该电话号码已存在',
                type: 'warning'
              });
            }
            if(response.data.code == 0){
              this.$message({
                message: '注册成功！当前页面"首页"',
                type: 'success'
              });
              this.xuanr() //调用渲染
              this.phone = ''
              this.password = ''
              this.names= ''
              this.imageUrl= ''
              this.addfinal_image=''
              this.radio= '1'
              this.radio2=1
              this.dialogVisible = false
            }
          }).catch(function(err){
          console.log('people出错',err);
          })
          }
        },
        select(){  //下拉查询
          // console.log(this.value);
          inquire({roleId:this.value}).then((response)=>{ 
            if(response.status == 200){
              response.data.data.map(item=>{
                item.lastlogin = new Date(item.lastlogin)
                item.lastlogin = item.lastlogin.toLocaleDateString().replace(/\//g, '-') + ' ' + item.lastlogin.toTimeString().substr(0, 8)
              })
              this.tableData = response.data.data
              this.page=1
            }
          }).catch((err)=>{
            console.log('setuserId搜索ID查询出错',err);
          })
        },
        set(v){  //设置角色按钮
          this.setjiaose = true
          this.usErId = v
        },
        yes(){
          var roio3 = [String(this.radio3)] 
          permission({id:this.usErId,roleIds:roio3}).then((response)=>{
            if(response.data.code == 0){
            this.xuanr()
            this.$message({
              message: '修改成功！回到当前页面',
              type: 'success'
            });
              this.setjiaose = false
            }
          }).catch((err)=>{
            console.log('修改权限出错',err);
          })
        },
        // 修改用户
        gai(ids,img,name,phone,isoks){
          this.rectifyuser = true
          this.usErId = ids
          this.imageUrlTow = img
          this.alter_picture = img
          this.phoneTow = phone
          this.namesTow = name
          this.radioG = isoks
        },
        suer(){  
          // console.log('角色id:',this.usErId,'图片路径：',this.imageUrlTow,'电话',this.phoneTow,'名字',this.namesTow,'状态',this.radioG);
          change_information({
            id:this.usErId,
            image:String(this.alter_picture),
            isok:Number(this.radioG),
            phone:this.phoneTow,
            username:this.namesTow
          }).then((response)=>{
            console.log(response.data);
            if(response.data.code == 52001){
              this.$message({
                message: '请输入正确的手机号，或用户名在6-12位',
                type: 'warning'
              });
            }
            if(response.data.code == 52002){
              this.$message({
                message: '该用户名已存在请重新编辑',
                type: 'warning'
              });
            }
            if(response.data.code == 0){
            this.xuanr()
            this.$message({
              message: '修改成功！回到当前页面',
              type: 'success'
            });
            this.imageUrlTow =''
            this.alter_picture =''
            this.rectifyuser = false
            }
          }).catch((err)=>{
            console.log('change_information,修改用户信息出错',err);
          })
        },
        handleSizeChange(val){  //分页
          this.limit = val
          this.page = 1
        },
        handleCurrentChange(val){
          this.page = val
        }
    },
    computed:{ 
      countpage(){  //分页
        return this.tableData.slice((this.page-1)*this.limit,this.page*this.limit)
      }
    }
    }
</script>
